<!-- subpkg_consult/patient/index.vue -->
<script setup>
  import { ref } from 'vue'
  import { patientDelApi, patientMylistApi } from '@/services/archive.js'
  import useConsultStore from '@/stores/consult'
  import { onShow } from '@dcloudio/uni-app'

  const consultStore = useConsultStore()

  // 侧滑按钮配置
  const swipeOptions = ref([
    {
      text: '删除',
      style: {
        backgroundColor: '#dd524d',
      },
    },
  ])

  const list = ref([])
  const getList = async () => {
    const res = await patientMylistApi()
    list.value = res.data

    // 记录默认患者的id
    consultStore.setPatientId(list.value[0]?.id)
  }

  onShow(() => getList())

  const onClick = async (e) => {
    const res = await uni.showModal({
      title: `你确定要删除"${e.name}"吗？`,
      confirmColor: 'red',
    })
    if (res.confirm) {
      await patientDelApi(e.id)
      await getList()
    }
  }

  const goEdit = (id) => {
    uni.navigateTo({
      url: `/subpkg_archive/form/index?id=${id}`,
    })
  }

  const goNextStep = () => {
    uni.navigateTo({
      url: '/subpkg_consult/payment/index',
    })
  }
</script>

<template>
  <scroll-page>
    <view class="patient-page">
      <view class="page-header">
        <view class="patient-title"> 请选择患者信息 </view>
        <view class="patient-tips">
          以便医生给出更准确的治疗，信息仅医生可见
        </view>
      </view>
      <uni-swipe-action>
        <uni-swipe-action-item
          v-for="v of list"
          :key="v.id + '_' + v.defaultFlag"
          :right-options="swipeOptions"
          @click="onClick(v)"
        >
          <view
            class="archive-card"
            :class="{ active: consultStore.patientId === v.id }"
            @click="consultStore.setPatientId(v.id)"
          >
            <view class="archive-info">
              <text class="name">{{ v.name }}</text>
              <text class="id-card">{{
                v.idCard.replace(/^(.{3})(.+)(.{4})$/, '$1******$3')
              }}</text>
              <text v-if="v.defaultFlag === 1" class="default">默认</text>
            </view>
            <view class="archive-info">
              <text class="gender">{{ v.genderValue }}</text>
              <text class="age">{{ v.age }}岁</text>
            </view>
            <view
              hover-class="none"
              class="edit-link"
              @click.stop="goEdit(v.id)"
            >
              <uni-icons
                type="icon-edit"
                size="20"
                color="#16C2A3"
                custom-prefix="iconfont"
              />
            </view>
          </view>
        </uni-swipe-action-item>
      </uni-swipe-action>

      <!-- 添加按钮 -->
      <view v-if="true" class="archive-card">
        <navigator
          class="add-link"
          hover-class="none"
          url="/subpkg_archive/form/index"
        >
          <uni-icons color="#16C2A3" size="24" type="plusempty" />
          <text class="label">添加患者</text>
        </navigator>
      </view>
    </view>
    <!-- 下一步操作 -->
    <view class="next-step">
      <button class="uni-button" @click="goNextStep">下一步</button>
    </view>
  </scroll-page>
</template>

<style lang="scss">
  // subpkg_consult/patient/index.scss
  .patient-page {
    padding: 30rpx 30rpx calc(env(safe-area-inset-bottom) + 200rpx);
  }

  .page-header {
    margin-top: 20rpx;
    margin-bottom: 40rpx;
  }

  .patient-title {
    font-size: 36rpx;
    color: #121826;
  }

  .patient-tips {
    margin-top: 10rpx;
    font-size: 26rpx;
    color: #6f6f6f;
  }

  .archive-card {
    display: flex;
    flex-direction: column;
    justify-content: center;

    position: relative;

    height: 180rpx;
    padding: 30rpx;
    margin-bottom: 30rpx;
    border-radius: 10rpx;
    box-sizing: border-box;
    border: 1rpx solid transparent;
    background-color: #f6f6f6;

    &.active {
      background-color: rgba(44, 181, 165, 0.1);
      // border: 1rpx solid #16c2a3;
    }

    .archive-info {
      display: flex;
      align-items: center;
      color: #6f6f6f;
      font-size: 28rpx;
      margin-bottom: 10rpx;
    }

    .name {
      margin-right: 30rpx;
      color: #121826;
      font-size: 32rpx;
      font-weight: 500;
    }

    .id-card {
      color: #121826;
    }

    .gender {
      margin-right: 30rpx;
    }

    .default {
      height: 36rpx;
      line-height: 36rpx;
      text-align: center;
      padding: 0 12rpx;
      margin-left: 30rpx;
      border-radius: 4rpx;
      color: #fff;
      font-size: 24rpx;
      background-color: #16c2a3;
    }
  }

  .edit-link {
    position: absolute;
    top: 50%;
    right: 30rpx;

    transform: translateY(-50%);
  }

  .add-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    .label {
      margin-top: 10rpx;
      font-size: 28rpx;
      color: #16c2a3;
    }
  }

  .next-step {
    position: fixed;
    right: 0;
    left: 0;
    bottom: 0;
    padding: 30rpx 40rpx calc(env(safe-area-inset-bottom) + 30rpx);
    background-color: #fff;
  }

  :deep(.uni-swipe_button-group) {
    bottom: 30rpx;
  }
</style>
